<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 输入框和添加 -->
      <div class="clearfix">
        <span>
          <el-input
            style="width: 475px"
            placeholder="请输入内容"
            v-model="input4"
          >
            <i
              @click="search"
              slot="suffix"
              class="el-input__icon el-icon-search"
            ></i>
          </el-input>
        </span>

        <el-button class="btn" type="primary" @click="addCommodity"
          >添加商品</el-button
        >
      </div>
      <!-- 内容 -->
      <el-table border :data="goodList" style="width: 100%; margin-top: 20px">
        <el-table-column width="50" type="index"> </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="1050">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格(元)" width="100">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" width="100">
        </el-table-column>
        <el-table-column prop="upd_time" label="创建时间" width="100">
        </el-table-column>
        <el-table-column prop="address" label="操作" width="216">
          <template #default="{ row }">
            <el-button style="width: 80px" type="primary" icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button
              @click="delCound(row)"
              style="width: 80px"
              type="danger"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="2"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { commodityList, delCommodityList, detailsList } from '@/api/good'
export default {
  name: 'goodIndex',
  data () {
    return {
      input4: '',
      currentPage4: 1, // 默认第几页
      total: 0, // 总数据几条
      goodList: [], // 渲染页面数据
      myGoodPage: {
        query: '',
        pagenum: 1, // 当前页
        pagesize: 10 // 每页
      }
    }
  },
  created () {
    this.getGoodsList()
  },

  methods: {
    // 分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.myGoodPage.pagesize = val
      this.getGoodsList()
      // console.log(this.myGoodPage.pagesize)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.myGoodPage.pagenum = val
      this.getGoodsList()
    },
    // 获取数据
    async getGoodsList () {
      const res = await commodityList(this.myGoodPage)
      console.log(res)
      this.total = res.data.total
      this.pagenum = res.data.pagenum
      this.goodList = res.data.goods
    },
    // 添加跳转
    addCommodity () {
      this.$router.push('/add')
    },
    // 点击删除
    delCound (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await delCommodityList(row.goods_id)
          this.$message.success(res.meta.msg)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 查询
    async search () {
      this.myGoodPage.query = this.input4
      const res = await detailsList(this.myGoodPage)
      console.log(res)
      this.getGoodsList()
    }
  }
}
</script>

<style scoped lang="scss">
.block {
  margin-top: 15px;
}
.box-card {
  margin-top: 15px;
}
.el-input__icon {
  width: 50px;
  height: 38px;
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  margin-right: -58px;
  border-radius: 2px;
}
.btn {
  margin-left: 70px;
}
</style>
